<template>
	<view>
		<view style="margin: 80rpx auto; width: 280rpx;"><image src="../../static/image/logo.png" mode="widthFix" style="width: 280rpx;height: 86.12rpx;"></image></view>
		<text style="text-align: center;color: #aaaaaa;font-weight: 510;">用户登陆</text>
		<form @submit="formSubmit">
			<view class="uni-form-item">
				<view class="image_container"><image src="../../static/image/cellphone.png" mode="widthFix" style="width: 40rpx; height: 40rpx;"></image></view>
				<input class="uni-input" name="cellphone" placeholder="请输入账号" />
			</view>
			<view class="uni-form-item">
				<view class="image_container"><image src="../../static/image/lock.png" mode="widthFix" style="width: 40rpx; height: 40rpx;"></image></view>
				<input class="uni-input" password="true" name="password" placeholder="请输入密码" />
			</view>
			<view class="uni-form-item">
				<view class="image_container"><image src="../../static/image/auth.png" mode="widthFix" style="width: 40rpx; height: 40rpx;"></image></view>
				<input class="uni-input auth_container" name="verifycode" placeholder="请输入验证码" />
				<image :src="src" style="width: 150rpx; height: 72rpx;" @click="refresh"></image>
			</view>

			<navigator class="forget_password" url="../forgetpassword/index" hover-class="navigator-hover"><text type="default">忘记密码?</text></navigator>
			<view class="uni-form-item"><button form-type="submit" type="primary">登陆</button></view>
			<navigator class="register" url="../register/index" hover-class="navigator-hover"><text type="default">没有账号, 免费注册 →</text></navigator>
		</form>
	</view>
</template>

<script>
export default {
	data() {
		return {
			src: this.websiteUrl + '/api/get_image_verify'
		};
	},
	onLoad() {},
	methods: {
		formSubmit: function(e) {
			var formdata = e.detail.value;
			uni.request({
				url: this.websiteUrl + '/api/login',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: formdata,
				success: res => {
					if (res.data.code == 500) {
						this.src = this.websiteUrl + '/api/get_image_verify?t=' + Math.random(new Date());
					} else if (res.data.code == 100) {
						uni.setStorage({
							key: 'cellphone',
							data: formdata.cellphone,
							success: function() {
								console.log('success');
							}
						});
						uni.switchTab({
							url: '../user/index'
						});
					}else{
						uni.showToast({
							icon:"none",
							title:res.data.msg
						})
					}
				}
			});
		},
		refresh: function() {
			this.src = this.websiteUrl + '/api/get_image_verify?t=' + Math.random(new Date());
		}
	}
};
</script>

<style>
.uni-form-item {
	display: flex;
	width: 80%;
	margin: 60rpx auto 0;
}

.uni-form-item .image_container {
	background-color: #9c9ea1;
	width: 100rpx;
	text-align: center;
	line-height: 80rpx;
	height: 72rpx;
	border-radius: 10rpx 0 0 10rpx;
}
.uni-form-item .auth_container {
	width: 70%;
}
.uni-form-item image {
	margin-left: 10rpx;
}
.uni-form-item input {
	background-color: white;
	height: 72rpx;
	width: 100%;
	padding-left: 20rpx;
	border-radius: 0 10rpx 10rpx 0;
}
.uni-form-item button {
	width: 100%;
	height: 72rpx;
	margin-top: 30rpx;
	line-height: 72rpx;
}
.forget_password,
.register {
	float: right;
	margin-right: 10%;
	font-size: 30rpx;
	color: #409eff;
}
</style>
